<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .app {
      height: 5000px;
    }


    .toTop {
      position: fixed;
      bottom: 200px;
      right: 100px;
      display: none;
    }
  </style>
  <body>
    <div class="app">
      <div class="toTop">到顶部</div>
    </div>
    <script>
      //   document.addEventListener('scroll', scrollEvent)
      function scrollEvent (e) {
        console.log(e)
        const top =
          document.documentElement.scrollTop ||
          document.body.scrollTop ||
          window.pageYOffset
        if (top > 300) {
          document.querySelector('.toTop').style.display = 'block'
        } else {
          document.querySelector('.toTop').style.display = 'none'
        }
        console.log(top)
      }
      //   防抖写法
      //   document.addEventListener('scroll', fn)
      //   let _interval = ''
      //   function fn () {
      //     clearTimeout(_interval)
      //     _interval = setTimeout(() => {
      //       scrollEvent()
      //     }, 500)
      //   }
      //   工具型方法
      document.addEventListener('scroll', fnA(500, scrollEvent))
      function fnA (time, callback) {
        let _interval = ''
        return function () {
          let _this = this
          let arg = arguments
          clearTimeout(_interval)
          _interval = setTimeout(() => {
            //   call,apply,bind
            callback.apply(_this, arg)
            // callback()
          }, time)
        }
      }
    </script>
  </body>
</html>
